<template>
  <view class="work-item" hover-class="active" @tap="workClick">
    <view class="item-title">
      <view>{{item.title}}</view>
      <text>{{item.salary}}</text>
    </view>
    <view class="describe">
      <text>{{item.short_name}}</text>
      <text>{{item.scale}}</text>
      <text>{{item.stage}}</text>
    </view>
    <view class="tags">
      <text class="tag" v-for="items in tags" :key="item">
        {{items}}
      </text>
    </view>
    <view class="boss">
      <view class="info">
        <view class="pic">
          <image src="../static/logo.png" mode=""></image>
        </view>
        <view class="name">
          {{item.r_name}} {{item.position}}
        </view>
      </view>
      <text class="place">{{item.district}} {{item.address}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    name: "workItem",
    props: {
      item:{
        type:Object,
        required:true
      },
      tags:{
        type: Array
      }
    },
    data() {
      return {
        
      };
    },
    methods: {
      workClick() {
        console.log(this.tags)
        uni.navigateTo({
          url: "../workDetail/workDetail"
        })
      }
    }
  }
</script>

<style lang="scss">
  .work-item {
    width: 680rpx;
    height: 230rpx;
    padding: 40rpx 35rpx;
    margin: auto;
    background: $uni-bg-color;
    margin-bottom: 10rpx;

    .item-title {
      display: flex;
      justify-content: space-between;
      font-weight: bold;

      view {
        font-size: 34rpx;
      }

      text {
        font-size: 30rpx;
        color: $uni-color-primary;
      }
    }

    .describe {
      margin-top: 8rpx;

      text {
        margin-right: 20rpx;
        font-size: 28rpx;
        color: $uni-text-color-grey;
      }
    }

    .tags {
      margin-top: 24rpx;

      .tag {
        background: #F5F5F5;
        margin-right: 10rpx;
        padding: 2rpx 16rpx;
        height: 42rpx;
        font-size: 24rpx;
        color: $uni-text-color-grey;
      }
    }

    .boss {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 26rpx;

      .info {
        display: flex;

        .pic {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          margin-right: 16rpx;

          image {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
          }
        }
      }

      .place {
        color: $uni-text-color-grey;
        font-size: 24rpx;
      }
    }
  }

  .active {
    background: #FDFDFD;
  }
</style>
